<template>
    <div class="page" ref="pageRef">
        <div class="type-left">
            <div class="search-box">
                <img class="logo" src="@/assets/Lw/search.png" alt="" />
                <a-input-search class="search" placeholder="搜索角色" />
            </div>
            <div class="list">
                <div class="sub-title">系统默认角色</div>
                <div class="item">
                    <div class="left">
                        <img src="@/assets/Lw/user.png" alt="" />
                        <div>媒资管理员</div>
                    </div>
                    <div class="right">12</div>
                </div>
                <div class="item">
                    <div class="left">
                        <img src="@/assets/Lw/user.png" alt="" />
                        <div>媒资使用员</div>
                    </div>
                    <div class="right">5</div>
                </div>
                <div class="line"></div>
                <div class="sub-title">
                    <div>自定义角色</div>
                    <img class="add" src="@/assets/Lw/plus.png" alt="" />
                </div>
                <div class="item" v-for="i in 30">
                    <div class="left">
                        <img src="@/assets/Lw/user.png" alt="" />
                        <div>媒资使用员 搭建了开发接收到阿斯蒂芬</div>
                    </div>
                    <div class="right">
                        <img src="@/assets/Lw/modify.png" alt="" />
                        <img src="@/assets/Lw/delete.png" alt="" />
                    </div>
                </div>
            </div>
        </div>
        <div class="page-container">
            <div class="page-title">
                <div class="left">
                    <div class="name">
                        公司领导 (<span>12</span>人)
                        <img src="@/assets/Lw/help.png" alt="" />
                    </div>
                    <SystemBreadcrumb />
                </div>
                <div class="search-box">
                    <a-input-search
                        width="460"
                        placeholder="请输入"
                        enter-button
                    />
                </div>
            </div>
            <div class="container">
                <div class="btns" v-if="activeKey == '1'">
                    <a-button type="primary" ghost>取消</a-button>
                    <a-button type="primary">保存</a-button>
                </div>
                <div class="btns" v-if="activeKey == '2'">
                    <a-button type="primary" ghost>取消</a-button>
                    <a-button type="primary">保存</a-button>
                </div>
                <div class="btns" v-if="activeKey == '3'">
                    <a-button type="primary" ghost>批量删除</a-button>
                    <a-button type="primary">关联成员</a-button>
                </div>
                <a-tabs v-model:activeKey="activeKey">
                    <a-tab-pane key="1" tab="功能权限"
                        >Content of Tab Pane 1</a-tab-pane
                    >
                    <a-tab-pane key="2" tab="数据权限" force-render
                        >Content of Tab Pane 2</a-tab-pane
                    >
                    <a-tab-pane key="3" tab="角色成员"
                        >Content of Tab Pane 3</a-tab-pane
                    >
                </a-tabs>
            </div>
        </div>
        <a-modal
            v-model:open="openDelete"
            title="确认删除"
            :getContainer="getContainer"
            :width="514"
        >
            <div>删除后不可恢复，请确认删除「公司领导」角色？</div>
        </a-modal>
        <a-modal
            v-model:open="open"
            title="添加角色"
            :getContainer="getContainer"
        >
            <a-form layout="vertical" :model="formState" :rules="rules">
                <a-form-item label="姓名" name="name">
                    <a-input placeholder="请输入" autocomplete="off" />
                </a-form-item>
                <a-form-item label="角色描述">
                    <a-textarea
                        placeholder="请输入"
                        :rows="4"
                        autocomplete="off"
                    />
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
    import SystemBreadcrumb from "@/components/SystemBreadcrumb/SystemBreadcrumb.vue";
    const activeKey = ref("1");
    const openDelete = ref(false);
    const open = ref(true);
    const pageRef = ref();

    const formState = ref();

    const getContainer = () => {
        return pageRef.value;
    };

    const rules = {};
</script>

<style lang="scss" scoped src="./RoleManage.scss"></style>
